<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>毕业答辩</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/footer.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/top.css"/>
    <style type="text/css">
        #loginTop {
            width: 100%;
            height: 58px;
        }

        #login_body {
            margin: 30px 0;
            height: 450px;
            width: 100%;
        }

        .layui-form-item {
            margin-top: 38px;
        }

        .layui-btn {
            margin-left: 6px;
        }

        #login_foot {
            width: 100%;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div>
    <div id="loginTop" class="layui-fluid layui-bg-black">
        <div class="layui-row">
            <div class="layui-col-md2 layui-col-md-offset1">
                <img src="../static/img/logo-v3.png" style="width: 180px; height: 50px;">
            </div>
            <div class="layui-col-md4" id="inline">
                <ul>
                    <li><a href="front/index.html">首页</a></li>
                    <li><a href="#">题库</a></li>
                    <li><a href="#">面试</a></li>
                    <li><a href="#">学习</a></li>
                    <li><a href="#">求职</a></li>
                    <li><a href="#">讨论区</a></li>
                    <li><a href="#">发现</a></li>
                </ul>
            </div>
            <div class="layui-col-md2">
                <input type="text" placeholder="帖子、试题、试卷、公司、牛友">
                <button type="submit" onclick="search()"><a href="#"><i class="layui-icon layui-icon-search"></i></a>
                </button>
            </div>
            <div class="layui-col-md3 ">
                <div class="z">
                    <i class="layui-icon layui-icon-cellphone"></i>APP
                    <span>|</span>
                </div>
                <div class="x">
                    <i class="layui-icon layui-icon-template-1"></i>企业版
                </div>
                <div class="y">
                    <a href="login.html">登录/注册</a>
                </div>
            </div>
        </div>
    </div>
    <div id="login_body" class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md10 layui-col-md-offset1 layui-row" style="height: 450px;">
                <div class="layui-col-md6 layui-bg-gray" style="height: 100%">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">登录</li>
                            <li>注册</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <form action="" method="post" class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="text" name="userName" id="userLoginPhone"
                                                   lay-verify="required" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">密码：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="password" name="userPwd" id="userPwd"
                                                   lay-verify="required" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">验证码：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="text" name="img" id="img"
                                                   lay-verify="required" autocomplete="off"/>
                                        </div>
                                        <div class="layui-input-inline">
                                            <img id="vimg" src="/school_project/code" width="120px" height="40px"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">权限：</label>
                                        <div class="layui-input-inline">
                                            <input type="radio" name="userFlag" id="a" value="0" checked/>用户
                                            <input type="radio" name="userFlag" id="b" value="1"/>管理员
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-inline">
                                            <button class="layui-btn layui-bg-blue" lay-submit type="button"
                                                    lay-filter="userLogin">登录
                                            </button>
                                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                            <button class="layui-btn layui-bg-blue " type="reset">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-tab-item">
                                <form action="" method="post" class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="text" name="userPhone" id="userRegPhone"
                                                   lay-verify="required" autocomplete="off"/>
                                        </div>
                                        <div class="layui-form-mid layui-word-aux" id="uphone_tip">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">验证码：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="text" name="phonecode" id="phonecode"
                                                   lay-verify="required" autocomplete="off" placeholder="请输入手机验证码"/>
                                        </div>
                                        <div class="layui-input-inline">
                                            <button type="button" class="layui-btn" id="vcode">获取验证码</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="text" name="userName" id="userName"
                                                   lay-verify="required" autocomplete="off"/>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">密码：</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" type="password" name="userPwd" id="uPwd"
                                                   lay-verify="required" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-inline">
                                            <button type="button" class="layui-btn" lay-submit
                                                    lay-filter="userRegister">
                                                注册
                                            </button>
                                            <button type="reset" class="layui-btn">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6" style="height: 100%; background: red;">
                    <div class="layui-carousel" id="test" lay-filter="test4">
                        <div carousel-item="">
                            <div><img src="../static/img/25682842585.jpg"
                                      style="width: 100%; height: 100%;"></div>
                            <div><img src="../static/img/1561693299_85c08f3feda2d2be1a3577cda4751715_w800.jpeg"
                                      style="width: 100%; height: 100%;"></div>
                            <div><img src="../static/img/1561693370_e4de763c74b427bb3a699cd285c6f9ed_w800.jpeg"
                                      style="width: 100%; height: 100%;"></div>
                            <div><img src="../static/img/u=265710789,363732266&fm=26&gp=0.jpg"
                                      style="width: 100%; height: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="login_foot" class="layui-fluid layui-bg-black">
        <div class="layui-row" style="height: 220px;">
            <div class="layui-col-md2 layui-col-md-offset2">
                <div id="ft_img">
                    <img src="../static/img/app_download.png"
                         style="height: 110px; width: 110px;border: 8px solid dimgray;">
                </div>
                <div id="ft_font">
                    <p>扫一扫，把题目装进口袋</p>
                </div>
            </div>
            <div id="ft_info" class="layui-col-md3" style="height: 220px;">
                <div id="web_name">
                    牛客网，互联网必备求职神器
                </div>
                <div id="web_icon">
                    <a href="#"><i class="layui-icon layui-icon-login-qq"></i></a>
                    <a href="#"><i class="layui-icon layui-icon-login-wechat"></i></a>
                    <a href="#"><i class="layui-icon layui-icon-login-weibo"></i></a>
                </div>
            </div>
            <div class="layui-col-md5">
                <ul class="links">
                    <li>
                        <a href="#">关于我们</a>
                    </li>

                    <li>
                        <a href="#">加入我们</a>
                    </li>

                    <li>
                        <a href="#">意见反馈</a>
                    </li>

                    <li>
                        <a href="#">企业服务</a>
                    </li>

                    <li>
                        <a href="#">联系我们</a>
                    </li>

                    <li>
                        <a href="#">免责声明</a>
                    </li>
                    <li>
                        <a href="#">友情链接</a>
                    </li>
                </ul>
                <div id="main">
                    <p>公司地址：北京市朝阳区大屯路东金泉时代广场3单元</p>
                    <p>联系方式：010-60728802(电话) admin@nowcoder.com </p>
                    <p>牛客科技©2019 All rights reserved</p>
                    <p>京ICP备14055008号-4增值电信业务经营许可证</p>
                    <p><img src="../static/img/ghs.png">京公网安备 11010502036488号</p>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    //------------------------------检测输入手机号是否合法---------------------------
    $('#userRegPhone').keyup(function () {
        console.log("keyup")
        if (!(/^1[3456789]\d{9}$/.test(this.value)) || $(this).val() == '' || $(this).val() == null) {
            $('#uphone_tip').html('<font color="red">手机号码格式不正确!</font>');
            $('#vcode').attr({
                'disabled': 'disabled',
                'class': 'layui-btn layui-bg-gray'
            });
            return false;
        } else {
            $('#uphone_tip').html('<font color="green">手机号格式验证通过!</font>');
            $('#vcode').removeAttr('disabled');
            $('#vcode').removeAttr('class');
            $('#vcode').attr('class', 'layui-btn');
            return true;
        }
    })
    layui.use(['layer', 'form', 'table', 'carousel', 'element'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var carousel = layui.carousel;
            var element = layui.element;
            carousel.render({
                elem: '#test',
                arrow: 'hover',
                width: '100%',
                height: '100%'
            })
            $(function () {
                $("#vimg").click(function () {
                    this.src = '/school_project/code?a=' + new Date();
                })
                window.sessionStorage.clear();

            })




            $('#vcode').click(function () {
                layer.open({
                    type: 2,
                    closeBtn: 0,
                    content: '../front/slider.html',
                    area: 'auto',
                    end: function () {
                        layer.msg("测试layui是否加载成功")
                        var t = 10;
                        var timer = setInterval(function () {
                            $('#vcode').html(t-- + 's重新获取');
                            $('#vcode').attr('class', 'layui-btn layui-bg-gray');
                            if (t == -1) {
                                clearInterval(timer);
                                $('#vcode').html('获取验证码');
                                $('#vcode').removeAttr('disabled');
                                $('#vcode').attr('class', 'layui-btn layui-bg-blue');
                            }
                        }, 1000);
                    }
                });
                //------------------------------获取验证码功能---------------------------
                var userPhone = $('#userRegPhone').val();
                if (userPhone != null || userPhone != '') {
                    $('#uphone_tip').html('');
                    var autoCode = '';
                    $.get('/school_project/user/gitPhoneCode', {
                        'userPhone': userPhone
                    }, function (res) {
                        autoCode = res.data;
                        console.info('从后台获取到的短信验证码:' + autoCode);
                        if (res.code == 2) {
                        }
                    }, 'json');
                    //------------------------------获取验证码功能---------------------------



                    // $('#phonecode').keyup(function () {
                    //     console.info(autoCode + "-----" + $(this).val());
                    //     if ($(this).val() == autoCode) {
                    //         $('#phonecode').attr('readonly', 'readonly');
                    //         return;
                    //     } else {
                    //         $('#phonecode').removeAttr('readonly');
                    //     }
                    // });
                    $(this).attr('disabled', 'disabled'); // 禁用
                    $(this).attr('class', 'layui-btn layui-bg-gray');
                } else {
                    $('#uphone_tip').html('<font color="red">请填写手机号!</font>');
                }
            })
        form.on('submit(userRegister)', function (data) {
            console.log(data.field)
            $.post('/school_project/user/userRegister', data.field, function (res) {
                // alert(res)
                if (res === 1) {
                    layer.confirm("<span style='color: green'>注册成功</span>", function () {
                        window.location.reload();
                    })
                } else {
                    layer.confirm("<span style='color: red'>注册失败</span>", function () {
                        window.location.reload();
                    })
                }
            })
        })

            form.on('submit(userLogin)', function (data) {
                $.post('/school_project/user/userLogin', data.field, function (res) {
                    // alert(typeof (res));
                    console.log(res)
                    // alert(res.user.userName)
                    if (res.login === "1") {
                        window.sessionStorage.userName = res.user.userName;
                        window.location.href = "../admin/admin.html"
                    } else if (res.login === "0") {
                        window.sessionStorage.userName = res.user.userName;
                        window.location.href = "../front/index.html"
                    } else {
                        layer.confirm(res.login, function () {
                            window.location.reload();
                        })
                    }
                })
            });
        }
    );
    //------------------------------检测输入手机号是否合法---------------------------

</script>

</body>
</html>
